<template>
  <my-modal ref="modal" title="个人资料" :button="[{ text: '保存资料', type: 'gold', plain: false }]" @clickBtn="editUserInfo">
    <view class="modal-container" style="padding-bottom: 0">
      <view class="form-item">
        <view class="input-title">真实姓名</view>
        <view class="input-item">
          <input v-model="truename" :disabled="truename" class="thorui-input" placeholder="存档后无法修改，请认真填写" placeholder-class="thorui-phcolor" />
        </view>
      </view>

      <view class="form-item">
        <view class="input-title">手机号码</view>
        <view class="input-item">
          <input type="number" v-model="telphone" class="thorui-input" placeholder="请输入手机号码" placeholder-class="thorui-phcolor" />
          <view class="line-border"></view>
          <tui-button type="transparent" width="110rpx" height="64rpx" :size="26" @click="editPhone">修改</tui-button>
        </view>
      </view>

      <view class="form-item">
        <view class="input-title">出生日期</view>
        <view class="input-item">
          <picker mode="date" :disabled="birthday" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
            <input disabled type="number" v-model="birthday" class="thorui-input" placeholder="存档后无法修改，请认真填写" placeholder-class="thorui-phcolor" />
          </picker>
        </view>
      </view>
    </view>
  </my-modal>
</template>

<script>
export default {
  data() {
    return {
      telphone: null,
      birthday: null, // 生日
      truename: null, // 真实姓名
      memberInfo: null
    }
  },
  computed: {
    startDate() {
      return this.getDate('start')
    },
    endDate() {
      return this.getDate('end')
    }
  },

  methods: {
    bindDateChange(e) {
      this.birthday = e.target.value
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()

      if (type === 'start') {
        year = year - 60
      } else if (type === 'end') {
        year = year
      }
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}-${month}-${day}`
    },

    editPhone() {
      this.close()
      this.$parent.openEditPhoneModal()
    },

    open(param) {
      this.memberInfo = this.$format(param, 'memberInfo')
      this.birthday = this.$format(this.memberInfo, 'birthday')
      this.truename = this.$format(this.memberInfo, 'truename')
      this.telphone = this.$format(this.memberInfo, 'telphone')

      this.editUserInfo('check')
      this.$refs.modal.open({ showClose: this.$format(param, 'showClose', true) })
    },

    close() {
      this.$emit('afterModalClose')
      this.$refs.modal.close()
    },
    // 个人中心查询/修改资料
    editUserInfo(type = 'edit') {
      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return reject()

      if (type === 'check') {
        Object.assign(baseParam, { type: 'check' })
      } else {
        Object.assign(baseParam, { truename: this.truename || null, birthday: this.birthday || null, type: 'edit' })
      }

      console.param('个人中心查询/修改资料', baseParam)
      this.$api
        .editUserInfo(baseParam)
        .then(res => {
          console.res('个人中心查询/修改资料', res)

          // 查询
          if (type === 'check') {
            // this.userInfo = this.$format(res, 'data')
            this.truename = this.$format(res, 'data.truename')
            this.telphone = this.$format(res, 'data.telphone')
            this.birthday = this.$format(res, 'data.birthday')
            return
          }

          // 修改
          this.$msg('success', this.$format(res, 'msg', '修改成功'))
          this.$emit('success')
          this.close()
        })
        .catch(err => {
          console.err('个人中心查询/修改资料', err)
          if (type === 'check') return
          this.errMsg(err, '修改失败')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
